<!--
 * @Author: your name
 * @Date: 2021-11-25 14:19:20
 * @LastEditTime: 2022-03-24 17:14:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \template\src\modules\FormCenter\ReimbursementPlan\index.vue
-->
<template>
  <div>
    <fks-form
      ref="form"
      :model="formData"
      :rules="formRules"
      :flow-config="flowConfig"
    >
      <fks-form-item
        lead
        :span="12"
        :label="LANG.REIMBURSEMENT_NAME"
        prop="name"
      >
        <fks-input v-model="formData.name" />
      </fks-form-item>
      <fks-form-item
        :span="12"
        label="报销部门"
        prop="departmentId"
      >
        <fks-org-selector
          :dept-id.sync="formData.departmentId"
          :dept-name.sync="formData.departmentName"
        />
      </fks-form-item>
      <fks-form-item
        lead
        :span="12"
        label="负责人"
        prop="manager"
      >
        <fks-user-selector
          :username.sync="formData.manager"
          :userfullname.sync="formData.managerFullname"
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        label="报销费用"
        prop="expense"
      >
        <fks-input
          v-model="formData.expense"
          type="number"
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        label="费用类型"
        prop="type"
      >
        <fks-select
          v-model="formData.type"
          style="width: 100%"
        >
          <fks-option
            v-for="item in purchaseType"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </fks-select>
      </fks-form-item>
      <fks-form-item
        lead
        :span="12"
        label="财务审批人"
        prop="financeAssignee"
      >
        <fks-user-selector
          :username.sync="formData.financeAssignee"
          :userfullname.sync="formData.financeAssigneeFullname"
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        label="经理审批人"
        prop="manageAssignee"
      >
        <fks-user-selector
          :username.sync="formData.manageAssignee"
          :userfullname.sync="formData.manageAssigneeFullname"
        />
      </fks-form-item>
      <fks-form-item
        :span="24"
        label="报销说明"
        prop="description"
      >
        <fks-input
          v-model="formData.description"
          :rows="3"
          type="textarea"
        />
      </fks-form-item>
      <fks-form-item
        :span="24"
        prop="notifyMethod"
        label="通知方式"
      >
        <fks-checkbox-group v-model="formData.notifyMethod">
          <fks-checkbox label="0">
            站内信
          </fks-checkbox>
          <fks-checkbox label="1">
            短信
          </fks-checkbox>
          <fks-checkbox label="2">
            邮件
          </fks-checkbox>
        </fks-checkbox-group>
      </fks-form-item>
      <fks-form-item :span="24" prop="notifyMethod" label="通知方式">
        <fks-checkbox-group v-model="formData.notifyMethod">
          <fks-checkbox label="站内信" value="0"></fks-checkbox>
          <fks-checkbox label="短信" value="1"></fks-checkbox>
          <fks-checkbox label="邮件" value="2"></fks-checkbox>
        </fks-checkbox-group>
      </fks-form-item>
    </fks-form>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import formMix from '../formMix'
import { isJSON } from '@/utils/util'
export default {
  name: 'ReimbursementPlan',
  mixins: [Mix, formMix],
  data() {
    return {
      // 输入此表单相关连流程的modelKey
      modelKey: 'reimbursement',
      // 输入此表单数据表对应的实体对象名
      entityName: 'Reimbursement',
      formName: '报销表单',
      service: {
        submit: '/fawkes-test/form/commit',
        initial: '/fawkes-test/form/query'
      },
      formData: {
        name: '',
        departmentId: '',
        departmentName: '',
        manager: '',
        managerFullname: '',
        expense: '',
        type: '',
        financeAssignee: '',
        financeAssigneeFullname: '',
        manageAssignee: '',
        manageAssigneeFullname: '',
        description: '',
        notifyMethod: []
      },
      //报销类型
      purchaseType: [
        { code: '实物报销', label: '实物报销' },
        { code: '软件报销', label: '软件报销' }
      ],
      //暂存时需要检验的属性
      preSaveValidateProps: ['name']
    }
  },
  computed: {
    formRules() {
      return {
        name: [
          {
            required: true
          }
        ],
        departmentId: [
          {
            required: false
          }
        ],
        manager: [
          {
            required: true
          }
        ],
        expense: [
          {
            trigger: 'change',
            required: true
          }
        ],
        financeAssignee: [
          {
            required: true
          }
        ],
        manageAssignee: [
          {
            required: true
          }
        ]
      }
    }
  },
  methods: {
    //提交前需要对formData进行处理的话，在beforeSubmit中进行,buttonInfo中有点击按钮的信息
    beforeSubmit(buttonInfo) {
      let submitData = { ...this.formData }
      submitData.notifyMethod = JSON.stringify(submitData.notifyMethod)
      return submitData
    },
    //在初始化表单时需要进行额外的操作在beforeInit中进行，res中有请求结果的所有数据，需要将处理完的结果return
    //如果不return，会默认使用res.data.entityObject
    beforeInit(res) {
      let formData = res.data.entityObject
      formData.notifyMethod = isJSON(formData.notifyMethod)
        ? JSON.parse(formData.notifyMethod)
        : []
      return formData
    },
    onSuccess(res, type) {}
  }
}
</script>

<style lang="scss" scoped></style>
